<template>
  <div class="home">
    <!--
    网页基础内容：
    1、财务管理功能
　　财务管理功能中包含了会计分支：总账、应收账、应付账、现金管理、固定资产核算、工资核算等。财务分支：财务计划、财务分析、财务决策。财务部门是企业的核心组成部分，当财务部门的运转效率得到提高后，可以加强与各个部门的协同工作。
　　2、销售管理功能
　　销售管理模块中主要由：客户管理、意向客户管理、销售管理、合同管理、竞争对手管理、商品管理等功能组成。销售部门作为企业的与客户之间的桥梁，有着维护老客户、开拓新商业线、加强商业合作等重要作用，将销售部门进行信息化管理非常重要。
　　3、采购管理功能
　　采购管理功能包括：采购申请管理、订单管理、发票管理、质检管理、供应商管理、比价管理、合同管理等内容。采购决定着成本，合理简化采购流程可以更好对人员和预算进行管理，利用系统录入完整的采购数据，方便其管理统计和优化，降低采购成本。
　　4、生产管理功能
　　生产管理功能：生产进度管理、生产材料管理、生产质量管理、生产人员管理、生产制度管理、生产设备管理等。生产部门注重效率和质量，一切的功能都为这两个条件来服务，系统化的管理可以规范生产流程，提高人员素养，保证设备的稳定运行，提高生产效率、生产质量。
　　5、仓库管理功能
　　仓库管理功能内建立了：业务批次管理、保质期管理、质量检验管理、库存管理、虚仓管理等模块。传统手工账本早已无法满足仓库的多样化管理，只有将其纳入仓库管理系统，才能保证供应链的完整，才能让进货和库存的需求得到满足。
　　6、人力资源管理功能
　　人力资源管理系统涵盖了：员工档案管理、组织架构管理、合同管理、工资管理、社保管理、考核绩效管理、出勤管理。人才的管理才是新时代企业管理的核心，优秀的人才可以给企业带来新鲜的血液。
    -->
    <div>
      <el-container>
        <!--侧边导航栏-->
        <el-aside style="width:auto;" class="layout-aside">
          <el-menu
              router
              class="el-menu-vertical"
              :default-active="activeMenuItemPath"
              :collapse="isCollapse"
              text-color="rgba(181, 178, 172, 0.91)"
              active-text-color="white">
            <el-menu-item @click="expand">
              <img :src="logo1"
                   style="
                   width: 25px;height:25px;border-radius: 10px">
              <template slot="title">
                <span slot="title" style="font-size: 130%">&nbsp;&nbsp;欢迎使用鹿行系统</span>
              </template>
            </el-menu-item>
            <el-menu-item index="/sys-admin/index">
              <i class="el-icon-s-home" style="font-size: 160%"></i>
              <template slot="title">
                <span slot="title" style="font-size: 130%">&nbsp;&nbsp;首页</span>
              </template>
            </el-menu-item>
            <hr>
            <el-submenu index="/sys-admin/finance/Receive">
              <template slot="title">
                <i class="el-icon-s-data"style="font-size: 160%"></i>
                <span slot="title" style="color:rgba(181,178,172,0.91);font-size: 130% ">&nbsp;&nbsp;财务管理</span>
              </template>
              <el-menu-item-group>
              <!--财务管理-->
                <el-menu-item index="/sys-admin/finance/Receive"><i class="el-icon-notebook-1">&nbsp;&nbsp;&nbsp;&nbsp;应收帐查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/finance/ReceiveAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;应收帐添加</i></el-menu-item>
                <el-menu-item index="/sys-admin/finance/FixAsset"><i class="el-icon-notebook-1">&nbsp;&nbsp;&nbsp;&nbsp;固定资产查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/finance/FixedAssetAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;固定资产添加</i></el-menu-item>
                <el-menu-item index="/sys-admin/finance/PayRoll"><i class="el-icon-notebook-1">&nbsp;&nbsp;&nbsp;&nbsp;工资核算</i></el-menu-item>
                <el-menu-item index="/sys-admin/finance/PayRollAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;工资核算添加</i></el-menu-item>
                <el-menu-item index="/sys-admin/finance/PayRollEditOnline"><i class="el-icon-edit-outline">&nbsp;&nbsp;&nbsp;&nbsp;工资在线修改</i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--销售管理-->
            <el-submenu index="/sys-admin/custom/Manage">
              <template slot="title">
                <i class="el-icon-s-marketing" style="font-size: 160%"></i>
                <span slot="title" style="color:rgba(181,178,172,0.91);font-size: 130% ">&nbsp;&nbsp;销售管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/sys-admin/custom/Manage"><i class="el-icon-s-custom">&nbsp;&nbsp;&nbsp;&nbsp;客户管理查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/custom/ManageAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;客户管理添加</i></el-menu-item>
                <el-menu-item index="/sys-admin/custom/Sales"><i class="el-icon-s-order">&nbsp;&nbsp;&nbsp;&nbsp;销售订单查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/custom/SalesAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;销售订单添加</i></el-menu-item>
                <!--  上传合同文件, 存路径  -->
                <el-menu-item index="/sys-admin/custom/Agreement"><i class="el-icon-s-order">&nbsp;&nbsp;&nbsp;&nbsp;合同管理查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/custom/AgreementAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;合同管理添加</i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--采购管理-->
            <el-submenu index="/sys-admin/purchase/Application">
              <template slot="title">
                <i class="el-icon-s-claim" style="font-size: 160%"></i>
                <span slot="title" style="color:rgba(181,178,172,0.91);font-size: 130% ">&nbsp;&nbsp;采购管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/sys-admin/purchase/Application"><i class="el-icon-s-claim">&nbsp;&nbsp;&nbsp;&nbsp;采购申请查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/purchase/ApplicationAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;采购申请添加</i></el-menu-item>
                <!--  分布添加,分别添加发票文件,订单数据  -->
                <el-menu-item index="/sys-admin/purchase/oderAndInvoice"><i class="el-icon-s-claim">&nbsp;&nbsp;&nbsp;&nbsp;订单发票查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/purchase/oderAndInvoiceAdd0"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;订单发票添加</i></el-menu-item>

                <el-menu-item index="/sys-admin/purchase/Suppliers"><i class="el-icon-s-claim">&nbsp;&nbsp;&nbsp;&nbsp;供应商查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/purchase/SuppliersAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;供应商添加</i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--生产管理-->
            <el-submenu index="/sys-admin/purchase/Progress">
              <template slot="title">
                <i class="el-icon-s-platform" style="font-size: 160%"></i>
                <span slot="title" style="color:rgba(181,178,172,0.91) ;font-size: 130%">&nbsp;&nbsp;生产管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/sys-admin/produce/Progress"><i class="el-icon-s-marketing">&nbsp;&nbsp;&nbsp;&nbsp;进度管理查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/produce/ProgressAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;进度管理添加</i></el-menu-item>
                <el-menu-item index="/sys-admin/produce/Material"><i class="el-icon-s-flag">&nbsp;&nbsp;&nbsp;&nbsp;材料管理查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/produce/MaterialAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;材料管理添加</i></el-menu-item>
                <el-menu-item index="/sys-admin/produce/Equipment"><i class="el-icon-s-platform">&nbsp;&nbsp;&nbsp;&nbsp;设备管理查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/produce/EquipmentAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;设备管理添加</i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!--仓库管理-->
            <el-submenu index="/sys-admin/warehouse/Quality">
              <template slot="title">
                <i class="el-icon-s-shop" style="font-size: 160%"></i>
                <span slot="title" style="color:rgba(181,178,172,0.91);font-size: 130% ">&nbsp;&nbsp;仓库管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/sys-admin/warehouse/Quality"><i class="el-icon-s-check">&nbsp;&nbsp;&nbsp;&nbsp;质检管理查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/warehouse/QualityAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;质检管理添加</i></el-menu-item>
                <el-menu-item index="/sys-admin/warehouse/Category"><i class="el-icon-s-shop">&nbsp;&nbsp;&nbsp;&nbsp;库存管理查询</i></el-menu-item>
                <el-menu-item index="/sys-admin/warehouse/CategoryAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;库存管理添加</i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <hr>
             <!--部门员工管理-->
            <el-submenu index="/sys-admin/adminDept/Dept">
              <template slot="title">
                <i class="el-icon-edit-outline" style="font-size: 160%"></i>
                <span slot="title" style="color:rgba(181,178,172,0.91) ;font-size: 130%">&nbsp;&nbsp;部门管理</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/sys-admin/adminDept/Dept"><i class="el-icon-s-check">&nbsp;&nbsp;&nbsp;&nbsp;部门列表</i></el-menu-item>
                <el-menu-item index="/sys-admin/adminDept/DeptAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;添加部门</i></el-menu-item>
                <el-menu-item index="/sys-admin/adminDept/AdminList"><i class="el-icon-user-solid">&nbsp;&nbsp;&nbsp;&nbsp;用户列表</i></el-menu-item>
                <el-menu-item index="/sys-admin/adminDept/AdminAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;添加用户</i></el-menu-item>
                <el-menu-item index="/sys-admin/adminDept/Role"><i class="el-icon-user">&nbsp;&nbsp;&nbsp;&nbsp;角色列表</i></el-menu-item>
                <el-menu-item index="/sys-admin/adminDept/RoleAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;添加角色</i></el-menu-item>
                <el-menu-item index="/sys-admin/adminDept/Permission"><i class="el-icon-key">&nbsp;&nbsp;&nbsp;&nbsp;权限列表</i></el-menu-item>
                <el-menu-item index="/sys-admin/adminDept/PermissionAdd"><i class="el-icon-circle-plus">&nbsp;&nbsp;&nbsp;&nbsp;添加权限</i></el-menu-item>
              </el-menu-item-group>
            </el-submenu>
          </el-menu>
        </el-aside>
        <el-container>
          <el-header
                     style="height: auto;width:100%;background-color: white;">
            <div style="height: 60px;float: left;vertical-align: middle" @click="expand">
              <img :src="logo" style="width:45px;height: 45px" align="absmiddle">
              <span
                  style="font-family: Bahnschrift;font-size: 150%;line-height: 60px;vertical-align: middle;">&nbsp;&nbsp;&nbsp;<b>{{ruleForm.username}}&nbsp;,&nbsp;鹿行系统欢迎您</b></span>
            </div>
            <div style="float: right">
              <i
                  @click="round"
                  :class="[isRotate?'rotate1':'rotate']"
                  class="el-icon-caret-bottom" id="expand2"
                  style="font-size: 150%;float: right;margin-top: 18px"></i>
            </div>
            <div
                style="width: 100%;background-color: rgba(239,239,239,0.91);float: left">
              <el-collapse-transition>
                <div v-show="!isRotate">
                  <div style="width: 100%;">
                    <div style="padding-bottom: 10px;margin-left: 10px">
                      <i class="el-icon-message-solid" id="expand3" style="margin-top: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;消息通知</i>
                    </div>
                    <div style="padding-bottom: 10px;margin-left: 10px">
                      <i class="el-icon-message" id="expand4" style="margin-top: 18px;">&nbsp;&nbsp;&nbsp;&nbsp;商户提醒</i>
                    </div>
                    <el-divider></el-divider>
                    <div style="padding-bottom: 10px;margin-left: 10px">
                      <img :src="acer"
                           style="display:block;background-color:gray;border-radius:30px;width:30px;height: 30px;margin-top: 8px;margin-bottom: 10px;float: left"
                           align="absmiddle">
                      <span
                          style="display: inline-block;float: left;margin-left: 14px;line-height: 44px;vertical-align: middle">
                        {{ruleForm.username}}
                      </span>
                      <i class="el-icon-caret-bottom"
                         id="expand5" @click="expand1"
                      ></i>
                    </div>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
            <div style="width: 100%;background-color: rgba(239,239,239,0.91);float: left">
              <el-collapse-transition>
                <div v-show="!isRotate1 && !isRotate">
                  <div style="width: 100%;padding-bottom: 20px">
                    <hr style="border: 1px black">
                    <el-card style="margin: 0 20px;border-radius: 15px">
                      <div>
                        <i class="el-icon-user-solid" id="expand6">&nbsp;&nbsp;&nbsp;&nbsp;用户中心</i>
                      </div>
                      <div>

                      </div>
                      <div>
                        <i class="el-icon-s-tools" id="expand8">&nbsp;&nbsp;&nbsp;&nbsp;用户设置</i>
                      </div>
                      <hr style="border: 0">
                      <div>
                        <i class="el-icon-switch-button" id="expand9">&nbsp;&nbsp;&nbsp;&nbsp;<a @click="logOut" style="text-decoration: none;color: red">退出账号</a></i>
                      </div>
                    </el-card>
                  </div>
                </div>
              </el-collapse-transition>
            </div>
          </el-header>
          <!--窗口大于100%的时候切换页面-->
          <el-main>
            <!-- 尤其它视图显示 -->
            <router-view/>
          </el-main>
        </el-container>
      </el-container>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      logo:require('@/assets/imgs/deer.png'),
      logo1:require('@/assets/imgs/deer1.png'),
      acer:require('@/assets/imgs/acer.jpg'),
      ruleForm:{
        username:'',
        password:'',
      },
      activeMenuItemPath: '',
      isCollapse: true,
      isRotate: true,
      isRotate1: true,
/*      name: "金洋",*/
    }
  },
  methods: {
    /*图标下拉框*/
    expand() {
      this.isCollapse = !this.isCollapse;
    }
    ,
    expand1() {
      this.isRotate1 = !this.isRotate1;
    }
    ,
    /*图标旋转*/
    round() {
      this.isRotate = !this.isRotate;
    },
    //用户信息
    logOut(){
      this.ruleForm= {username:'', password:'',};
      this.$router.push('/login')
    },
    loadLocalRuleForm() {
      let localRuleFormString = localStorage.getItem('localRuleForm');
      let localRuleForm = JSON.parse(localRuleFormString);

      if (!localRuleForm || !localRuleForm.username) {
        this.$router.push('/login');
        return;
      }

      this.ruleForm.username = localRuleForm.username;
    },
  },
  mounted() {
    this.loadLocalRuleForm();
  }
}
</script>

<style>
/*初始化*/
* {
  z-index: 0;
  padding: 0;
  margin: 0;
}

/*网页背景色*/
body {
  background-color: rgba(221, 221, 221, 0.85);
}

.layout-aside{
  background-color: rgba(95, 92, 89, 0.91) !important;
}

/*子节点选中样式(前面只有一级，后面子级)*/
.el-menu-item.is-active, .el-submenu el-menu-item.is-active {
  background-color: rgba(95, 92, 89, 0.91) !important;
}

.el-menu-item-group .el-menu-item, div.el-menu-item-group__title {
  background-color: rgba(21,19,18,0.9) !important;
}

/*子节点选中鼠标移入样式*/
.el-menu-item.is-active:hover, .el-submenu .el-menu-item.is-active:hover {
  background-color: rgba(95, 92, 89, 0.91) !important;
}

/*子节点鼠标移入样式*/
.el-menu-item:hover, div.el-submenu__title:hover {
  background-color: rgba(95, 92, 89, 0.91) !important;
}

.el-aside::-webkit-scrollbar {
  display: none;
}

.el-main > div {
  width: 100%;
  height: 100vh;
}

/*小于100%*/
.el-menu-vertical:not(.el-menu--collapse) {
  width: 300px;
  min-height: 100%;
  background-color: rgba(56, 53, 51, 0.91) !important;
  z-index: 999;
}

/*小于100%*/
.el-menu-vertical {
  width: 300px;
  /*width为0则没有侧边栏了*/
  background-color: rgba(56, 53, 51, 0.91) !important;
  height: 100%;
  width: 0;
}

div hr {
  border-color: rgba(116, 113, 111, 0.91);
  margin: 10px 10px;
}

i {
  color: gray;
  font-size: 120%;
  display: inline-block;
}

div > .el-container > .el-container > .el-header > div > div > ul > li {
  float: left;
  margin-right: 20px;
}

div > .el-container > .el-container > .el-header > div > .el-collapse-transition > div > div > div {
  float: left;
  width: 100%;

}
/*下次注解前 都为悬浮变色*/
#expand1:hover {
  color: gray;
}

#expand1 {
  color: black;
}

#expand2:hover {
  color: gray;
}

#expand2 {
  color: black;
}

#expand3:hover {
  color: gray;
}

#expand3 {
  color: black;
}

#expand4:hover {
  color: gray;
}

#expand4 {
  color: black;
}

#expand5 {
  color: black;
  margin: 10px;
}

#expand5:hover {
  color: gray;
  margin: 10px;
}

#expand6 {
  color: black;
  margin: 10px;
}

#expand6:hover {
  color: gray;
  margin: 10px;
}

#expand8 {
  color: black;
  margin: 10px;
}

#expand8:hover {
  color: gray;
  margin: 10px;
}

#expand9 {
  color: rgba(177, 15, 16, 0.91);
  margin: 10px;
}

#expand9:hover {
  color: rgba(255, 22, 23, 0.91);
  margin: 10px;
}

/*导航栏三角旋转*/
.rotate {
  transition: all 1s;
}

.rotate1 {
  transform: rotate(90deg);
  transition: all 1s;
}

</style>

